import {ElMessage} from 'element-plus';
import ArkTable from '../ark-table/ArkTable.vue';
import ArkTableConstant from "../ark-table/ArkTableConstant.js";
import ArkDotStatus from '../../base-component-v1/ark-dot-status/ArkDotStatus.vue';

export default {
  title: 'ark-component-v1/ArkTable',
  component: ArkTable,
  components: {ArkDotStatus},
  parameters: {
    docs: {
      description: {
        component: `请配合 <span style="font-weight: bold;font-size: 14px;color: grey">vue、element-plus、element-plus-icons、tailwindcss、lodash、ArkTooltip</span> 使用`
      }
    }
  },
  argTypes: {
    requestOptions: {description: '请求配置对象'},
    searchOptions: {description: '搜索配置对象'},
    bodyOptions: {description: '主体配置对象'},
    paginationOptions: {description: '分页配置对象'},
    '\'search-item-label-\' + searchItem.prop': {description: '搜索项名称部分，作用域参数为某项searchOptions.searchItem'},
    '\'search-item-component-\' + searchItem.prop': {description: '搜索项组件部分，作用域参数为某项searchOptions.searchItem'},
    default: {description: '整个主体部分'},
    'body-header-right-multi-selection': {description: '主体头部的刷新按钮左部分多选操作块部分'},
    'body-header-right': {description: '主体头部的刷新按钮左部分'},
    '\'body-table-column-\' + columnItem.prop': {description: '主体表格列整个内部分，作用域参数为表格列默认插槽作用域参数{row}'},
    'body-table-inside': {description: '主体表格内部除多选列、索引列和其他列的部分'},
  }
};

const pageData = [
  {
    name: '哈哈哈哈哈哈哈哈哈哈',
    sex: '女',
    birth: '2019-09',
    matriculation: '2001-01-01',
    customize: {
      color: 'red',
      animate: true,
      desc: '告警'
    },
    switch: true,
    hasChildren: true,
  },
  {
    name: '呵呵',
    sex: '男',
    birth: '2019-09',
    matriculation: '2001-01-02',
    customize: {
      color: 'orange',
      animate: true,
      desc: '异常'
    },
    switch: true,
  },
  {
    name: '嘻嘻',
    sex: '女',
    birth: '2019-09',
    matriculation: '2001-01-03',
    customize: {
      color: 'green',
      animate: true,
      desc: '正常'
    },
    switch: true,
  },
  {
    name: '嘿嘿',
    sex: '男',
    birth: '2019-09',
    matriculation: '2001-01-04',
    customize: {
      color: 'blue',
      animate: true,
      desc: '在线'
    },
    switch: true,
  },
  {
    name: '嗯嗯',
    sex: '女',
    birth: '2019-09',
    matriculation: '2001-01-05',
    customize: {
      desc: '离线'
    },
    switch: true,
  },
  {
    name: '啊啊',
    sex: '男',
    birth: '2019-09',
    matriculation: '2001-01-06',
    customize: {
      color: 'red',
      animate: true,
      desc: '异常'
    },
    switch: true,
  },
  {
    name: '呃呃',
    sex: '女',
    birth: '2019-09',
    matriculation: '2001-01-07',
    customize: {
      color: 'red',
      animate: true,
      desc: '异常'
    },
    switch: true,
  },
  {
    name: '试试',
    sex: '男',
    birth: '2019-09',
    matriculation: '2001-01-08',
    customize: {
      color: 'red',
      animate: true,
      desc: '异常'
    },
    switch: true,
  },
  {
    name: '饿饿',
    sex: '女',
    birth: '2019-09',
    matriculation: '2001-01-09',
    customize: {
      color: 'red',
      animate: true,
      desc: '异常'
    },
    switch: true,
  },
  {
    name: '康康',
    sex: '男',
    birth: '2019-09',
    matriculation: '2001-01-10',
    customize: {
      color: 'red',
      animate: true,
      desc: '异常'
    },
    switch: true,
  },
  {
    name: '困困',
    sex: '女',
    birth: '2019-09',
    matriculation: '2001-01-11',
    customize: {
      color: 'red',
      animate: true,
      desc: '异常'
    },
    switch: true,
  },
  {
    name: '滚滚',
    sex: '男',
    birth: '2019-09',
    matriculation: '2001-01-12',
    customize: {
      color: 'red',
      animate: true,
      desc: '异常'
    },
    switch: true,
  },
];

export const Basic = {
  name: '基本使用',
  render: (args) => ({
    components: {ArkTable, ArkDotStatus},
    setup() {
      return {args};
    },
    template: `
      <ArkTable v-bind="args" style="width: 850px">
        <template #body-table-column-customize="{row}">
          <ArkDotStatus v-bind="row.customize"/>
        </template>
      </ArkTable>`,
  }),
  args: {
    requestOptions: {
      request: (params) => {
        ElMessage({
          message: '请求操作，参数请看控制台打印',
          type: 'success',
        });
        console.log('请求操作参数', params);
        
        function getPageData(params) {
          if (params.pageSize >= pageData.length) {
            return pageData;
          }
          
          let startIndex = (params.currentPage - 1) * params.pageSize;
          let endIndex = startIndex + params.pageSize;
          if (endIndex >= pageData.length) {
            return pageData.slice(startIndex, pageData.length);
          }
          
          return pageData.slice(startIndex, endIndex);
        }
        
        return {
          msg: '查询成功',
          code: '00000',
          data: {
            total: 12,
            currentPage: params.currentPage,
            pageSize: params.pageSize,
            rows: getPageData(params),
          }
        };
      },
      error: (msg) => {
        ElMessage({
          message: msg,
          type: 'error',
        });
      },
    },
    searchOptions: {
      columnNumber: 4,
      searchLimit: 3,
      searchItems: [
        {
          prop: 'name',
          label: '输入框',
          tip: '输入框提示文字',
          value: '你是谁',
        },
        {
          prop: 'sex',
          label: '选择框',
          type: ArkTableConstant.operation.select,
          selectOptions: {
            options: [
              {
                label: 'Option1',
                value: 'option1',
              },
              {
                label: 'Option2',
                value: 'option2',
              },
              {
                label: 'Option3',
                value: 'option3',
              },
              {
                label: 'Option4',
                value: 'option4',
              },
            ]
          }
        },
        {
          prop: 'sex',
          label: '选择框',
          type: ArkTableConstant.operation.select,
          selectOptions: {
            groups: [
              {
                label: 'Group1',
                options: [
                  {
                    label: 'Option1',
                    value: 'option1',
                  },
                ]
              },
              {
                label: 'Group2',
                options: [
                  {
                    label: 'Option2',
                    value: 'option2',
                  },
                  {
                    label: 'Option3',
                    value: 'option3',
                  },
                ]
              }
            ]
          }
        },
        {
          prop: 'sex',
          label: '级联选择框',
          type: ArkTableConstant.operation.cascader,
          attributes: {
            clearable: true,
            props: {multiple: true},
            options: [
              {
                label: '一号楼',
                value: 'build1',
                children: [
                  {
                    label: '一层',
                    value: 'floor11',
                    children: [
                      {
                        label: '房间1',
                        value: 'room111',
                      },
                      {
                        label: '房间2',
                        value: 'room112',
                      },
                    ]
                  },
                  {
                    label: '二层',
                    value: 'floor12',
                  },
                  {
                    label: '三层',
                    value: 'floor13',
                  },
                ]
              },
              {
                label: '二号楼',
                value: 'build2',
                children: [
                  {
                    label: '一层',
                    value: 'floor21',
                  },
                  {
                    label: '二层',
                    value: 'floor22',
                  },
                  {
                    label: '三层',
                    value: 'floor23',
                  },
                ]
              }
            ]
          }
        },
        {
          prop: 'birth',
          label: '日期选择框',
          type: ArkTableConstant.operation.datePicker,
        },
        {
          prop: 'matriculation',
          label: '时间选择框',
          type: ArkTableConstant.operation.timePicker,
        },
        {
          prop: 'matriculation',
          label: '时间选择框',
          type: ArkTableConstant.operation.timeSelect,
        },
      ],
    },
    bodyOptions: {
      title: '表格主体部分标题',
      button: {
        text: '主体部分按钮',
        click: () => {
          ElMessage({
            message: '主体部分按钮操作，无参数',
            type: 'success',
          });
        },
      },
      table: {
        attributes: {
          'row-key': 'name',
          lazy: true,
          'tree-props': {children: 'children', hasChildren: 'hasChildren'},
          load: (row, treeNode, resolve) => {
            ElMessage({
              message: '懒加载操作，参数请看控制台打印',
              type: 'success',
            });
            console.log('懒加载操作参数', row, treeNode);
            
            setTimeout(() => {
              resolve([
                {
                  name: '哦哦',
                  sex: '男',
                  birth: '2019-09',
                  matriculation: '2001-01-01',
                  customize: {
                    color: 'red',
                    animate: true,
                    desc: '告警'
                  },
                  switch: true,
                }
              ]);
            }, 1000);
          }
        }
      },
      columns: [
        {
          prop: 'name',
          label: '姓名',
        },
        {
          prop: 'sex',
          label: '性别',
        },
        {
          prop: 'birth',
          label: '出生日期',
        },
        {
          prop: 'matriculation',
          label: '入学时间',
        },
        {
          prop: 'customize',
          label: '自定义列',
        },
        {
          prop: 'switch',
          label: '开关操作',
          type: ArkTableConstant.operation.switch,
          change: (event, row) => {
            ElMessage({
              message: '开关操作，参数请看控制台打印',
              type: 'success',
            });
            console.log('开关操作参数', row.switch);
          }
        },
        {
          label: '操作',
          type: ArkTableConstant.operation.actions,
          limit: 4,
          actions: [
            {
              text: '修改',
              click: (row) => {
                ElMessage({
                  message: '修改操作，参数请看控制台打印',
                  type: 'success',
                });
                console.log('修改操作参数', row);
              }
            },
            {
              text: '删除',
              click: (row) => {
                ElMessage({
                  message: '删除操作，参数请看控制台打印',
                  type: 'success',
                });
                console.log('删除操作参数', row);
              }
            },
            {
              text: '详情',
              click: (row) => {
                ElMessage({
                  message: '详情操作，参数请看控制台打印',
                  type: 'success',
                });
                console.log('详情操作参数', row);
              }
            },
            {
              text: '解绑',
              click: (row) => {
                ElMessage({
                  message: '解绑操作，参数请看控制台打印',
                  type: 'success',
                });
                console.log('解绑操作参数', row);
              }
            },
            {
              text: '报废',
              click: (row) => {
                ElMessage({
                  message: '报废操作，参数请看控制台打印',
                  type: 'success',
                });
                console.log('报废操作参数', row);
              }
            },
          ]
        },
      ],
      showColIndex: true,
      multiSelection: {
        selectionCol: true,
        button: {
          confirm: {
            confirm: (selectedRows) => {
              ElMessage({
                message: '多选默认按钮确认操作，参数请看控制台打印',
                type: 'success',
              });
              console.log('多选默认按钮确认操作参数', selectedRows);
            },
            cancel: (selectedRows) => {
              ElMessage({
                message: '多选默认按钮取消操作，参数请看控制台打印',
                type: 'success',
              });
              console.log('多选默认按钮取消操作参数', selectedRows);
            },
          }
        }
      },
    },
    paginationOptions: {
      show: true,
      hasMarginTop: false,
    },
  }
};
